<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 分页样式</title>
</head>
<body>
<style>

    body{
        text-align: center;
        margin:auto;
        box-sizing: border-box;
    }

    .pagination {
        list-style-type: none;
        display: inline-block;

    }
    .pagination li{
        display: inline;

    }
    .pagination a{
        float: left;
        display: block;
        border: 1px solid transparent;
        padding: 5px 12px;
        text-decoration:  none;
    }
    .modal-1 a:hover:not(.modal-1 .active){
        background-color: #888888;
    }
    .modal-1 .active{
        background-color: blue;
        color:white;
    }
    .modal-1 a{
        border: 1px solid grey;
    }
    .modal-1 .prev{
        border-radius: 10px 0 0 10px;
    }
    .modal-1 .next{
        border-radius: 0px 10px 10px 0px;
    }
    .modal-5{
        background-color: grey;
        color:black;
    }
    .modal-5 .prev{
        opacity: 0.5 !important;
    }
    .modal-5 .active{
        box-shadow: 0px -10px blue ;
        background-color: blue;
        color:white
        bor
    }
</style>
<ul class="pagination modal-1">
    <li><a href="#" class="prev">&laquo</a></li>
    <li><a href="#" class="active">1</a></li>
    <li> <a href="#">2</a></li>
    <li> <a href="#">3</a></li>
    <li> <a href="#">4</a></li>
    <li> <a href="#">5</a></li>
    <li> <a href="#">6</a></li>
    <li> <a href="#">7</a></li>
    <li> <a href="#">8</a></li>
    <li> <a href="#">9</a></li>
    <li><a href="#" class="next">&raquo;</a></li>
</ul><br>
<style>
    .modal-2 a{
        border:  1px solid grey;
        color:grey;
    }
    .modal-2 a:hover:not(.modal-2 .active){
        color:red;
        background-color: grey;
    }
    .modal-2 .active{
        background-color: red;
        color:white;
    }
    .modal-2 .prev{
        border-radius: 50% 0 0 50%;

    }
    .modal-2 .next{
        border-radius:  0 50% 50% 0;
    }
</style>
<ul class="pagination modal-2">
    <li><a href="#" class="prev">&laquo </a></li>
    <li><a href="#">1</a></li>
    <li> <a href="#">2</a></li>
    <li> <a href="#" class="active">3</a></li>
    <li> <a href="#">4</a></li>
    <li> <a href="#">5</a></li>
    <li> <a href="#">6</a></li>
    <li> <a href="#">7</a></li>
    <li> <a href="#">8</a></li>
    <li> <a href="#">9</a></li>
    <li><a href="#" class="next">  &raquo;</a></li>
</ul><br>
<style>
    .modal-3 a{
        color:wheat;
    }
    .modal-3 .active{
        background-color: green;
        border-radius: 50%;
    }
    .modal-3 a:hover:not(.modal-3 .active){
        background-color: darkgreen;
        border-radius: 50%;
    }

</style>
<ul class="pagination modal-3">
    <li><a href="#" class="prev">&laquo</a></li>
    <li><a href="#" class="active">1</a></li>
    <li> <a href="#">2</a></li>
    <li> <a href="#">3</a></li>
    <li> <a href="#">4</a></li>
    <li> <a href="#">5</a></li>
    <li> <a href="#">6</a></li>
    <li> <a href="#">7</a></li>
    <li> <a href="#">8</a></li>
    <li> <a href="#">9</a></li>
    <li><a href="#" class="next">&raquo;</a></li>
</ul><br>
<style>
    .modal-4 a{
        color:white;
        background-color: yellowgreen;
        border-radius: 50%;
        margin-left: 10px;
    }
    .modal-4 .prev{
        border-radius: 50% 0 0 50%;

    }
    .modal-4 .next{
        border-radius:  0 50% 50% 0;
    }


</style>
<ul class="pagination modal-4">
    <li><a href="#" class="prev">
        <i class="fa fa-chevron-left"></i>
        Previous
    </a>
    </li>
    <li><a href="#">1</a></li>
    <li> <a href="#">2</a></li>
    <li> <a href="#">3</a></li>
    <li> <a href="#">4</a></li>
    <li> <a href="#" class="active">5</a></li>
    <li> <a href="#">6</a></li>
    <li> <a href="#">7</a></li>
    <li><a href="#" class="next"> Next
        <i class="fa fa-chevron-right"></i>
    </a></li>
</ul><br>
<ul class="pagination modal-5">
    <li><a href="#" class="prev fa fa-arrow-left"> </a></li>
    <li> <a href="#">1</a></li>
    <li> <a href="#">2</a></li>
    <li> <a href="#">3</a></li>
    <li> <a href="#">4</a></li>
    <li><a href="#" class="active">5</a></li>
    <li> <a href="#">6</a></li>
    <li> <a href="#">7</a></li>
    <li> <a href="#">8</a></li>
    <li> <a href="#">9</a></li>
    <li><a href="#" class="next fa fa-arrow-right"></a></li>
</ul>
<br>
<ul class="pagination modal-6">
    <li><a href="#" class="prev">&laquo</a></li>
    <li> <a href="#">1</a></li>
    <li> <a href="#">2</a></li>
    <li><a href="#" class="active">3</a></li>
    <li> <a href="#">5</a></li>
    <li> <a href="#">6</a></li>
    <li><a href="#" class="next">&raquo;</a></li>
</ul>
</body>
</html>